<template>
  <div>
    <br />
    <br />
    <br />
    <br />
    <Row>
      <Col span="6">
        <div id="select-month">
          选择月份:
          <DatePicker
            type="month"
            placeholder="选择要查看的月份"
            :confirm="confirm"
            style="width: 200px"
            v-model="date"
            @on-ok="changeDate"
          ></DatePicker>
        </div>
      </Col>
    </Row>
    <br />
    <br />
    <br />

    <Row>
      <Col offset="2" span="20">
        <Card>
          <div id="chart_emotion_index" style="width: 100% ;height: 400px;"></div>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col offset= "2" span="20">
        <Card>
          <div id="chart_emotion_distribution" style="width: 100% ;height: 400px;"></div>
        </Card>
      </Col>
      <Col span="20"><</Col>
    </Row>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "Emotion",
  data() {
    return {
      chart_emotion_index: "",
      chart_emotion_distribution: "",
      emotion_index: [],
      happy_num: 0,
      sad_num: 0,
      angry_num: 0,
      tired_num: 0,
      confirm: true,
      date: new Date(),
    };
  },
  methods: {
    changeDate() {
      this.$api.get(
        "myemotion/",
        { month: this.formatDate(this.date) },
        (response) => {
          if (response.status != 200) {
            this.$Message.error("查询失败，服务器错误");
            this.$Message.error("" + response);
          } else {
            var data = response.data;
            if (data.err_code == 0) {
              data = data.data;
              this.happy_num = this.sad_num = this.angry_num = this.tired_num = 0;
              this.emotion_index.length = 0;
              for (var i = 0; i < data.length; i++) {
                this.emotion_index.push(data[i].index.toFixed(3));
                if (data[i].emotion == "angry") this.angry_num++;
                else if (data[i].emotion == "happy") this.happy_num++;
                else if (data[i].emotion == "tired") this.tired_num++;
                else if (data[i].emotion == "sad") this.sad_num++;
              }
              this.chart_emotion_distribution.setOption({
                series: [
                  {
                    data: [
                      { value: this.happy_num, name: "开心" },
                      { value: this.sad_num, name: "失落" },
                      { value: this.angry_num, name: "愤怒" },
                      { value: this.tired_num, name: "厌恶" },
                    ],
                  },
                ],
              });
              this.chart_emotion_index.setOption({
                xAxis: {
                  data: Array.from(new Array(data.length + 1).keys()).slice(1),
                },
                series: [
                  {
                    data: this.emotion_index,
                  },
                ],
              });
            } else {
              this.$Message.error("查询失败");
              this.$Message.error(data.error);
            }
          }
        }
      );
    },
    formatDate(UTCDateString) {
      if (!UTCDateString) {
        return "-";
      }
      function formatFunc(str) {
        //格式化显示
        return str > 9 ? str : "0" + str;
      }
      var date2 = new Date(UTCDateString); //这步是关键
      var year = date2.getFullYear();
      var mon = formatFunc(date2.getMonth() + 1);
      var day = formatFunc(date2.getDate());
      var dateStr = year + "-" + mon + "-" + day;
      return dateStr;
    },
    initChart() {
      //初始化情绪指数折线图
      this.chart_emotion_index = echarts.init(
        document.getElementById("chart_emotion_index")
      );
      this.chart_emotion_index.setOption({
        title: {
          text: "本月情绪指数(数值越大，心情越好)",
        },
        tooltip: {},
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            type: "line",
            data: [],
          },
        ],
      });
      //初始化情绪分布图
      this.chart_emotion_distribution = echarts.init(
        document.getElementById("chart_emotion_distribution")
      );
      this.chart_emotion_distribution.setOption({
        title: {
          text: "本月情绪分布图",
        },
        series: [
          {
            type: "pie",
            data: [],
          },
        ],
      });
    },
  },
  //调用
  mounted() {
    this.$nextTick(function () {
      this.initChart();
      this.changeDate();
    });
  },
};
</script>
<style scoped>
</style>
